<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘事件测试</title>
		<!--<script src="js/dom01.js"></script>-->
		<style>
			#box{
				width: 400px;
				height: 400px;
				background: burlywood;
				margin: auto;
				position: relative;
				overflow: hidden;
			}
			#fj{
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
				top: 300px;
				left: 150px;
			}									
		</style>
	</head>
	<body>
		<div id="box">
			<div id="fj">
				小飞机
			</div>
		</div>						
	</body>
	<script>
		var fj=document.getElementById("fj");
	    document.οnkeydοwn=function(evevt){ //键盘按下事件绑定
        //  var e=window.event||e;
         var e = event || window.event || arguments.callee.caller.arguments[0];
		 	switch(e.keyCode){
		 		case 37: //左
		 		fj.style.left=Math.max(0,fj.offsetLeft-5)+"px";
		 		break; 
		 		case 38: //上
		 		fj.style.top=Math.max(0,fj.offsetTop-5)+"px";
		 		break;
		 		case 39:  //右
		 		fj.style.left=Math.min(350,fj.offsetLeft+5)+"px";
		 		break;	
		 		case 40:  //下
		 		fj.style.top=Math.min(350,fj.offsetTop+5)+"px";
		 		break;		 			
			 }
			 
			 var m1=document.getElementsByClassName("aid");
			 var k = document.getElementsByClassName('divid')
			  for(var i=0;i<m1.length;i++){
				   (function(i){
					    m1[i].onmouseover=function(){
							 alert(k[i].innerHTML);
							 }
						 })(i);
						}
///////////////////
			var m1=document.getElementsByClassName("aid");
			var k = document.getElementsByClassName('divid')
			for(var i=0;i<m1.length;i++){ 
				m1[i].i = i; m1[i].onmouseover=function(){ 
					var i = this.i; 
					alert(k[i].innerHTML);
				 } }
	    }
	</script>
</html>